<template>
  <el-dialog
    v-dialogDrag
    top="5vh"
    :before-close="dialogClose"
    :title="dialogTitle"
    :visible="isShow"
    destroy-on-close
  >
    <!--//!  form -->
    <div class="dialog-form">
      <el-form
        ref="subform"
        label-position="right"
        label-width="100px"
        :model="formTemper"
        :rules="rules"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="formTemper.name" />
        </el-form-item>
        <el-form-item label="项目描述" prop="description">
          <el-input v-model="formTemper.description" />
        </el-form-item>
      </el-form>
    </div>
    <!--//!  form -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import {
  Message
} from 'element-ui';

const formTemper = {
  description: '',
  name: ''
};
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    rowNow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formTemper: { ...formTemper },
      rules: {
        name: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        description: [
          { required: true, message: ' ', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    isAdd() {
      return Object.keys(this.rowNow).length === 0;
    },
    dialogTitle() {
      return this.isAdd ? '添加项目' : '编辑项目';
    }
  },
  watch: {
    isShow: {
      handler: function(v) {
        if (v && !this.isAdd) {
          this.formTemper = {
            ...this.rowNow
          };
        } else {
          this.formTemper = { ...formTemper };
        }
      }
    }
  },
  methods: {
    dialogClose() {
      this.$emit('dialogClose');
    },
    submitForm() {
      this.$refs.subform.validate((valid) => {
        if (valid) {
          console.log(this.rowNow);
          this.$emit('dialogDeal', {
            row: {
              ...this.rowNow,
              ...this.formTemper
            },
            type: this.isAdd ? 'add' : 'edit'
          });
        } else {
          Message.error('请正确填写数据');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .dialog-form {
    display: grid;
    grid-template-columns: 1fr .4fr;
  }
  // /deep/ * {
  //  .el-form {
  //  }
  // }
</style>
